<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.5.12 (464966)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2017-11-24 02:16:58 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2021-06-29 02:52:08 +0000"/><title>DAY30：jQuery进阶-AJAX/DOM/事件</title></head><body><div><span style="color: unset; font-weight: bold; font-family: &quot;Helvetica Neue&quot;; font-size: 18px;">一、jQueryDOM</span></div><div style="box-sizing: border-box; padding: 8px; border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);"><div><span style="background-color: rgb(251, 250, 248);"><font face="Monaco" style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px; font-weight: bold;">过滤器：</span></font></span></div><div style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    parent()        父元素</span></span></div></div><div style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    parents()       所有父元素</span></span></div></div><div style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    parentsUntil()  指定范围父元素</span></span></div><div style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    children()      子元素</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    find()          后代元素</span></span></div></div></div><div style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    siblings()      兄弟元素</span></span></div></div><div style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    next()          下一个兄弟元素</span></span></div><div><span style="font-family: Monaco; font-size: 14px;">    nextAll()       下所有兄弟元素</span></div><div><span style="font-family: Monaco; font-size: 14px;">    nextUntil()     下指定范围兄弟元素</span></div></div><div style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="font-family: Monaco; font-size: 14px;">    prev()          上一个兄弟元素</span></div></div><div style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="font-family: Monaco; font-size: 14px;">    prevAll()       上所有兄弟元素</span></div></div><div style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="font-family: Monaco; font-size: 14px;">    prevUntil()     上指定范围兄弟元素</span></div></div><div><span style="letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249);"><span style="background-color: rgb(249, 249, 249); font-family: Monaco; font-size: 14px;">    eq()            指定索引的后代元素</span></span></div><div><span style="letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(249, 249, 249);"><span style="background-color: rgb(249, 249, 249); font-family: Monaco; font-size: 14px;"><span>    end()<span>    <span>    <span>   返回上一个正在操作的元素</span></span></span></span><br/></span></span></div><div><span style="font-size: 14px; text-align: center;"><br/></span></div><div><span style="font-size: 14px; text-align: center;"><br/></span></div><div><span style="font-weight: bold; font-family: Monaco; font-size: 14px;">元素内容及属性类操作：</span></div><div><span style="font-family: Monaco; font-size: 14px;">    html()          可以解析html标签</span></div><div><span style="font-family: Monaco; font-size: 14px;">    text(text)      不能解析html标签</span></div><div><span style="font-family: Monaco; font-size: 14px;">    val(text)       表单类元素的value</span></div><div><span style="font-family: Monaco; font-size: 14px;">    </span></div><div><span style="font-family: Monaco; font-size: 14px;">    以上方法，传参表示设置，不传参表示获取</span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    attr()          属性操作</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">        </span><span style="background-color: rgb(251, 250, 248); font-family: Monaco;">$('div').attr('type')</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">              // </span><span style="background-color: rgb(251, 250, 248); font-family: Monaco;">获取该属性属性值</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">        </span><span style="background-color: rgb(251, 250, 248); font-family: Monaco;">$('div').attr('type','value')</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">      // </span><span style="background-color: rgb(251, 250, 248); font-family: Monaco;">设置属性值</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        $('div').attr({</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">            'data':'value1',</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">            'data2':'value2'</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        })    // </span></span><span style="font-size: 14px; color: unset; font-family: Monaco;">设置一组属性值</span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        $('div').removeAttr('title')；      // 删除指定属性</span></span></div><div><br/></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">    addClass()      添加class</span></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">        </span><span style="font-family: Monaco; color: unset;">addClass('</span><span style="font-family: Monaco; color: unset;">class')</span><span style="font-size: 14px; color: unset; font-family: Monaco;">        // </span><span style="font-family: Monaco; color: unset;">给元素添加一个class</span></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">        addClass('class1 class2 class3')    // 给元素添加多个class</span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    removeClass()   删除class</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        removeClass('class1 class2 class3') // 删除元素的多个class</span></span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">    </span><span style="background-color: rgb(251, 250, 248); font-family: Monaco;">toggleClass('class') 如果元素没有当前class那么添加，如果有那么删除</span></span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="font-family: Monaco; font-weight: bold;">元素样式类操作：</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    css()           </span></span><span style="font-size: 14px; color: unset; font-family: Monaco;">获取样式</span></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">        css(name)            // 获取某个元素的行内样式</span></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">        </span><span style="font-family: Monaco; color: unset;">css('name','value</span><span style="font-family: Monaco;">’</span><span style="font-family: Monaco; color: unset;">)</span><span style="font-size: 14px; color: unset; font-family: Monaco;">  // </span><span style="font-family: Monaco; color: unset;">设置行内样式</span></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">        css({</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">            name1:'value1',</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">            name2:'value2'</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        })          // 设置多个行内样式</span></span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        css(['color','height','width'])    //获取多个样式，返回值为对象</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;"> </span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    width()         内容宽度</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    innerWidth()    padding + 内容宽度</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    outerWidth()    padding + border + 内容宽度</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    offset()        获取某个元素相对于浏览器窗口(可视区域的距离)</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    scrollTop()     获取垂直滚动条的值</span></span></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">    </span><span style="font-size: 14px; color: unset; font-family: Monaco;">scrollLeft()</span><span style="font-size: 14px; color: unset; font-family: Monaco;">    </span><span style="font-size: 14px; color: unset; font-family: Monaco;">获取水平滚动条的值</span></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">    </span></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">    以上方法，不传参表示获取，传参表示设置，有width就有height</span></div><div><span style="font-size: 14px; color: unset; font-family: Monaco;">    </span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">    position()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">      </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; font-family: Monaco;">获取某个元素相对于父元素的偏移距离</span></div><div><font face="Monaco" style="font-size: 14px;"><br style="color: rgb(51, 51, 51);"/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-size: 14px;">案例： 楼梯。选项卡。</span></span></div><div><font face="Monaco" style="font-size: 14px;"><a href="DAY30%EF%BC%9AjQuery%E8%BF%9B%E9%98%B6-AJAX_DOM_%E4%BA%8B%E4%BB%B6.resources/%E6%A5%BC%E6%A2%AF%E7%AE%80%E5%8C%96%E7%89%88_1.html">楼梯简化版_1.html</a></font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><font face="Monaco" style="font-size: 14px;"><span style="font-family: Monaco; font-size: 14px; font-weight: bold;">元素节点操作：</span></font></div><div><span style="font-size: 14px; font-family: Monaco;">    1.创建节点。</span></div><div><span style="font-size: 14px; font-family: Monaco;">        var box=$('&lt;div id="box"&gt;节点&lt;/div&gt;');    //创建一个节点</span></div><div><span style="font-size: 14px; font-family: Monaco;">        $('body').append(box);    //将节点插入到&lt;body&gt;元素内部</span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    2.插入节点</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        append(content) 向指定元素内部后面插入节点 content</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        appendTo(content) 将指定元素移入到指定元素 content 内部后面</span></span></div><div><span style="font-size: 14px; font-family: Monaco;">        prepend(content) 向指定元素 content 内部的前面插入节点</span></div><div><span style="font-size: 14px; font-family: Monaco;">        prependTo(content) 将指定元素移入到指定元素 content 内部前面</span></div><div><span style="font-size: 14px; font-family: Monaco;">        after(content) 向指定元素的外部后面插入节点 content</span></div><div><span style="font-size: 14px; font-family: Monaco;">        before(content) 向指定元素的外部前面插入节点 content</span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    3.节点复制</span></span></div><div><span style="font-size: 14px; font-family: Monaco;">        $('body').append($('div').clone(true));     //复制一个节点添加到 HTML 中</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        注：clone(true) 参数为空时，只复制元素和内容，不复制事件。为 true 时，也拷贝事件。</span></span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="font-family: Monaco; font-size: 14px;">    4.节点的删除</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        $('div').remove();    //直接删除 div 元素</span></span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">        </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">remove()</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); font-family: Monaco;">方法可以接收一个参数，过滤需要删除的元素。</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        $('div').empty();     //删除 div 所有的子元素</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">    5.节点的替换</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">        $('div').replaceWith('&lt;span&gt;节点&lt;/span&gt;');     //将 div 替换成 span 元素</span></span></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><span style="background-color: rgb(251, 250, 248);"><font face="Monaco" style="font-size: 14px;"><br/></font></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); font-family: Monaco; font-size: 14px;">案例1：增加表单姓名，</span></span></div><div><font face="Monaco" style="font-size: 14px;"><a href="DAY30%EF%BC%9AjQuery%E8%BF%9B%E9%98%B6-AJAX_DOM_%E4%BA%8B%E4%BB%B6.resources/%E6%88%90%E7%BB%A9%E5%8D%95_3.html">成绩单_3.html</a></font></div><div><font face="Monaco" style="font-size: 14px;"><br style="color: rgb(51, 51, 51);"/></font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div></div><div><br/></div><div><font style="font-size: 18px;" face="Helvetica Neue"><br/></font></div><div><font style="font-size: 18px;" face="Helvetica Neue"><span style="font-family: &quot;Helvetica Neue&quot;; font-size: 18px; font-weight: bold;">二、jQuery事件</span></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><font face="Monaco" style="font-size: 18px;">1. 常规事件绑定</font></div><div><font face="Monaco" style="font-size: 14px;">    jquery的事件就是将JavaScript事件简写（省略了on）,然后在后面加上括号。(注：前缀必须是jQuery对象)</font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><font face="Monaco" style="font-size: 14px;">    原生绑定方式：</font></div><div><div><font style="font-family: Monaco; font-size: 14px;"><font>        document.onclick = function(){</font>}</font></div></div><div><div><font face="Monaco" style="font-size: 14px;">    Jq绑定方式：</font></div><div><font face="Monaco" style="font-size: 14px;">        $(document).click(function(){})</font></div></div><div><font face="Monaco" style="font-size: 14px;">    </font></div><div><div><font face="Monaco" style="font-size: 18px;"><br/></font></div></div><div><font face="Monaco" style="font-size: 18px;">2. on绑定，off删除</font></div><div><font style="font-family: Monaco;"><font style="font-size: 14px;">    on方法绑定事件</font></font></div><div><font face="Monaco"><font size="3">    </font></font><span style="font-size: 14px;">    </span><span style="font-size: 14px;">jqDOM元素.on("click", [selector], [data], function(){})</span></div><div><font style="font-size: 14px;" face="Monaco"><br/></font></div><div><font style="font-size: 14px;" face="Monaco">    off方法删除事件</font></div><div><font face="Monaco" style="font-size: 14px;">    on绑定的事件存在事件命名空间，以供off删除时找到指定事件</font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><font style="font-family: Monaco;"><font size="3">   </font><font style="font-size: 14px;">     jqDOM元素.on("click.a", function(){})</font></font></div><div><font face="Monaco" style="font-size: 14px;">        jqDOM元素.on("click.b", function(){})</font></div><div><font face="Monaco" style="font-size: 14px;">        jqDOM元素.off("click.a")</font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><font face="Monaco" style="font-size: 14px;">    on方法直接支持事件委托</font></div><div><font style="font-size: 14px;"><font face="Monaco">        </font>jqDOM元素.on("click", "要委托的子元素选择器", function(){})</font></div><div><font style="font-size: 14px;" face="Monaco"><br/></font></div><div><font style="font-size: 14px;" face="Monaco"><font>    </font>多个事件，共用一个事件处理函数</font></div><div><font style="font-size: 14px;" face="Monaco">        $('input').on('mouseover mouseout',function(){</font><span style="font-size: 14px; font-family: Monaco;">})</span></div><div><div><font style="font-size: 14px;" face="Monaco"><br/></font></div></div><div><font style="font-size: 14px;" face="Monaco">    多个事件，使用不同事件处理函数</font></div><div><font style="font-size: 14px;" face="Monaco">        $('input').on({</font></div><div><font style="font-size: 14px;" face="Monaco">            mouseout:function(){</font><span style="font-family: Monaco; font-size: 14px;">},</span></div><div><font style="font-size: 14px;" face="Monaco">            mouseover:function(){}</font></div><div><font face="Monaco" style="font-size: 14px;">         })</font></div><div><font face="Monaco" style="font-size: 14px;"><br/></font></div><div><font face="Monaco" style="font-size: 14px;">    一个事件，多个不同的事件处理函数</font></div><div><font style="font-size: 14px;" face="Monaco">        jqDOM元素.on("click", function(){})</font></div><div><font style="font-size: 14px;" face="Monaco">        jqDOM元素.on("click", function(){})</font></div><div><font face="Monaco"><font style="font-size: 14px;">        </font></font></div><div><font style="font-size: 18px;"><font face="Monaco">3.</font><font face="Monaco"> one绑定</font></font></div><div><font face="Monaco" style="font-size: 14px;">    绑定的事件只能被触发一次，然后会被删除</font></div><div><font style="font-size: 14px; font-family: Monaco;">        jqDOM元素.one("click", function(){})</font></div><div><font face="Monaco"><span style="font-size: 18px;"><br/></span></font></div><div><font face="Monaco" style="font-size: 18px;">4. hover绑定</font></div><div><font face="Monaco"><font style="font-size: 14px;">    为 鼠标进入mouseenter 和 鼠标离开mouseleave 事件的封装</font></font></div><div><font face="Monaco"><font style="font-size: 14px;">    </font></font></div><div><font face="Monaco"><font style="font-size: 14px;">        </font></font><font style="font-size: 14px;">jqDOM元素.hover(function(){}, function(){})</font></div><div><font style="font-size: 14px;">    </font></div><div><font style="font-size: 14px;">    第一个参数为鼠标进入的事件处理函数</font></div><div><font style="font-size: 14px;">    第二个参数为鼠标离开的事件处理函数</font></div><div><div><br/></div></div><div><font style="font-size: 18px;">5. bind绑定，unbind删除（新版本中已被抛弃）</font></div><div><font style="font-size: 14px;">    新版中已被废弃，全面被on/off方法取代</font></div><div><div><br/></div></div><div><font style="font-size: 18px;">6. trigger和triggerHandler</font></div><div><font style="font-size: 14px;">    模拟事件触发，自定执行指定事件</font></div><div><font style="font-size: 14px;">    </font></div><div><font><font size="3">        jqDOM元素.trigger("click”);</font></font></div><div><div><br/></div></div><div><font style="font-size: 14px;">    trigger默认触发事件冒泡</font></div><div><font style="font-size: 14px;">    triggerHandler不会触发事件冒泡</font></div><div><div><font style="font-size: 18px;"><br/></font></div></div><div><font style="font-size: 18px;">7. 事件对象</font></div><div><font style="font-size: 14px;" face="Monaco">    JavaScript事件对象是浏览器默认传入的，但是对于浏览器的兼容问题，我们需要对事件对象进行兼容。很烦！但是jQuery已经帮我们解决了所有兼容性的烦恼，并且给我们添加了很多有用的方法。</font></div><div><div><font style="font-size: 14px;" face="Monaco"><br/></font></div></div><div><font style="font-size: 14px;" face="Monaco">        event.target              获取绑定事件的DOM元素</font></div><div><font style="font-size: 14px;" face="Monaco">        event.type                获取事件的类型</font></div><div><div><span style="font-family: Monaco; font-size: 14px;">        event.data                获取事件中传递的数据</span></div></div><div><div><span style="font-family: Monaco; font-size: 14px;">        event.pageX/pageY         获取根据页面原点的X,Y值</span></div></div><div><div><span style="font-family: Monaco; font-size: 14px;">        event.screenX/screenY     获取根据显示器窗口的X,Y值</span></div></div><div><div><span style="font-family: Monaco; font-size: 14px;">        event.offsetX/offsetY     获取根据父元素X,Y值</span></div></div><div><div><span style="font-family: Monaco; font-size: 14px;">        event.which               获取当前鼠标点击的键1,2,3</span></div></div><div><div><span style="font-family: Monaco; font-size: 14px;">        event.altKey/shiftKey/ctrlKey/   返回 true、false</span></div></div><div><div><span style="font-family: Monaco; font-size: 14px;">        event.preventDefault()    阻止默认行为</span></div></div><div><div><span style="font-family: Monaco; font-size: 14px;">        event.stopPropagation()   取消事件冒泡</span></div></div><div><span style="font-family: Monaco; font-size: 14px;"><br/></span></div><div><div><span style="font-family: Monaco; font-size: 14px;">        return false              阻止默认事件和事件冒泡，双层阻止，小心使用</span></div></div><div><div><div><br/></div></div></div></div><div><br/></div><div><span style="font-weight: bold; font-size: 18px;">三、Ajax</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">异步和同步</span></div><div><br/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢？我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下 一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务， 感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一 条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div style="text-align: center;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span><img src="DAY30%EF%BC%9AjQuery%E8%BF%9B%E9%98%B6-AJAX_DOM_%E4%BA%8B%E4%BB%B6.resources/Image.png" height="188" width="187"/><br/></div></div><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div style="text-align: center;"><div><br style="color: rgb(51, 51, 51);"/></div></div><div style="text-align: center;"><div style="text-align: left;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    jQuery对Ajax采用了三层封装，其中最底层的是$.ajax(),中层封装是$().load()，$.get()，$.post，最顶层是getScript和getJSON()。</span></div></div></div><div><br/></div><div><span style="font-family: &quot;Helvetica Neue&quot;; font-size: 18px;">$().load()方法</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);"><div style="font-size: 12px;"/><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    $()</span><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">.load()方法是局部方法</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        $().load(url, data, cb)</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248);"><br/></span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">    1.url: 要请求的地址，可以提供筛选功能。</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        </span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">$().load('data/test.html ')</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        </span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">$().load('data/text.html .box')&gt;&gt;&gt;筛选功能</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 12px;"/></div></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">    2.data: 发送的数据，可选</span></div><div style="font-size: 12px;"><span style="font-size: 14px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        </span><span style="font-size: 14px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">$().load('data/test.html',{ data:'admin' })</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 12px;"/></div></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">    3.cb: 回调函数function(response,status,xhr){}</span></div><div style="font-size: 12px;"><span style="font-size: 14px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        </span><span style="font-size: 14px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">$().load('data/test.html',{ data:'admin' },function(</span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">response,status,xhr</span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">){})</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 12px;"/></div></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 12px;"/></div></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">    </span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">response</span><span style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;" /><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">：返回结果。</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 12px;"/></div></div><div><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">    </span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">status</span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;"> </span><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">：状态字符，success，或者error等</span></span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 12px;"/></div></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">    </span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: none; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">xhr</span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;"> </span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">：XMLHttpRequest</span><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; border: 0px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">对象</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div style="font-size: 12px; margin: 15px 0px; padding: 0px; border: 0px; text-align: start; text-indent: 0px; widows: 1;"><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">xhr有四个常用属性。</span></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 421px;"/><col style="width: 421px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">属性名</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">说明</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">responseText</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">作为响应主体被返回的文本</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">responseXML</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">如果响应主体内容类型是"text/xml"或"application/xml"， 则返回包含响应数据的 XMLDOM 文档</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">status</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">响应的 HTTP 状态（状态码）</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">statusText</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 421px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">HTTP 状态的说明</span></div></td></tr></tbody></table><div><br/></div></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">$.get()和$.post()</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);"><div style="font-size: 12px;"><span style="widows: 1; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    $.get()和$.post()方法是全局方法，使用语法一致，此处以$.get()作为说明</span></div><div style="font-size: 12px;"><span style="widows: 1; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        $.get(url, data, cb, dataType)</span></div><div style="font-size: 12px;"><span style="widows: 1; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        </span></div><div><span style="widows: 1;"><font face="Monaco" style="font-size: 14px;"><span style="font-family: Monaco; font-size: 14px; color: rgb(51, 51, 51);">    u</span><span style="caret-color: rgb(51, 51, 51); font-family: Monaco; font-size: 14px; color: rgb(51, 51, 51);">rl</span><span style="font-family: Monaco; font-size: 14px; color: rgb(51, 51, 51);">: 地址,必填</span></font></span></div><div><span style="widows: 1;"><span style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 14px;">    data: 要发送的数据，可选，</span></span></div><div><span style="widows: 1;"><span style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 14px;">    cb: 请求成功的回调函数</span></span></div><div><span style="widows: 1;"><span style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 14px;">    dataType: 强制转换接收到的数据类型</span></span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">        常用的</span><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">数据格式有html，text，json。</span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">        如果写入数据格式，那么默认会强制转换为该格式</span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">        如果传入错误格式，那么不会执行请求成功的回调函数</span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">    </span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">    注：一般情况下，dataType都是智能判断，并不需要人为设置，也建议不要使用这个参数。</span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">    </span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">    $.get()和$.post()的差别:$.get()是以get方式提交，$.post()方式是以post方式提交。</span></div><div><span style="font-size: 14px; widows: 1;"><br/></span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">        1.get方式提交数据是吧数据放在浏览器网址上面的，post是通过http消息，实体提交的。</span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">        2.get提交方式有大小限制，限制在2KB，而post方式不收大小限制。</span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">        3.get方式因为在浏览器中会被历史记录缓存，所以这种提交数据方式并不安全，post方式没有这种问题。</span></div><div><span style="widows: 1; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        4.在服务器端（php语言），get方式通过$</span><span style="widows: 1; font-size: 14px; border: 0px; color: rgb(51, 51, 51); font-family: Monaco;">GET[]方式获取，post通过$</span><span style="widows: 1; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">POST[]方式获取。</span></div><div><span style="font-size: 14px; widows: 1; color: rgb(51, 51, 51); font-family: Monaco;">案例：DEMO选项卡</span></div></div><div><br/></div><div><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 18px; color: rgb(51, 51, 51); font-family: &quot;Helvetica Neue&quot;; font-weight: bold;">$.ajax()方法</span></div><div style="box-sizing: border-box; padding: 8px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);"><div><span style="caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-family: Monaco;">jQuery</span><span style="color: rgb(51, 51, 51); font-family: Monaco;">封装的ajax的底层方法，可以实现以上方法所有功能，可以直接使用一个对象参数，配置所有信息</span></div><div><br/></div><div style="font-size: 12px;"><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $.ajax({</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        url:'',         // 请求地址</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        type:'',        // </span><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">用什么方式提交</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        data:{},        // </span><span style="font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">传入数据用键值对方式传入</span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        success:function(){</span><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">},    // 请求成功时的回调函数</span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="font-size: 14px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        e</span><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">rror:function(){},      // 请求失败时的回调函数</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        beforeSend:function(){}, // 执行send之前的回调函数</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="caret-color: rgb(51, 51, 51); background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        t</span><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">imeout:1000,            // 请求超时的时间</span></span></div><div><span style="background-color: rgb(251, 250, 248);"><span style="background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">        global:true,             // 是否触发ajax的全局事件</span></span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248);"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    })</span></span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248);"><br/></span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248);"><br/></span></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; background-color: rgb(251, 250, 248);"><br/></span></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><font face="Monaco" style="font-size: 14px;"><span style="font-family: Monaco; font-size: 14px; font-weight: bold;">jQuery的全局事件（生命周期）</span></font></div></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 177px;"/><col style="width: 281px;"/><col style="width: 281px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 177px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">全局函数</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;"> 何时被触发</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">参数</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 177px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">ajaxStart</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">在jQuery AJAX函数或命令发起时，但在XHR实例被创建之前</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">类型被设置为ajaxStart的全局回调信息对象</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 177px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">ajaxSend</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">在XHR实例被创建之后，但在XHR实例被发送给服务器之前</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">类型被设置为ajaxSend的全局回调信息对象；XHR实例；$.ajax()函数使用的属性</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 177px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">ajaxSuccess</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">在请求已从服务器返回之后，并且响应包含成功状态码</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">类型被设置为ajaxSuccess的全局回调信息对象；XHR实例；$.ajax()函数使用的属性</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 177px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">ajaxError</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">在请求已从服务器返回之后，并且响应包含失败状态码</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">类型被设置为ajaxError的全局回调信息对象；XHR实例；$.ajax()函数使用的属性；被XHR实例返回的异常对象(如果有的话)</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 177px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">ajaxComplete</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">在请求已从服务器返回之后，并且在任何已声名的ajaxSuccess或ajaxError回调函数已被调用之后</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">类型被设置为ajaxComplete的全局回调信息对象；XHR实例；$.ajax()函数使用的属性</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 177px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">ajaxStop</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">在所有其他AJAX处理完成以及任何其他适用的全局回调函数已被调用之后</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 281px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">类型被设置为ajaxStop的全局回调信息对象</span></div></td></tr></tbody></table><div style="font-size: 12px;"><div style="font-size: 12px;"><br style="color: rgb(51, 51, 51); font-family: Monaco; font-size: 12px;"/></div><div style="font-size: 12px;"><br/></div></div><div style="font-size: 12px;"><div style="font-size: 12px;"/></div></div><div><br/></div><div style="letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><font face="Helvetica Neue" style="font-size: 18px;"><span style="font-family: &quot;Helvetica Neue&quot;; font-size: 18px; font-weight: bold;">四、工具类方法</span></font></div></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><font style="font-size: 14px; font-family: Monaco;"><div><b>$.ajaxSetup()</b></div><div>    ajax初始化对于ajax可以做一个预先设置，减少重复。</div><div><div><br/></div></div><div>        $.ajaxSetup({</div><div>            url:'',</div><div>            type:'post',</div><div>            data:{user:'ddd'}</div><div>        })</div><div><div><br/></div></div><div>        $.ajax({</div><div>            success:function(data){</div><div>                alert(data)</div><div>            }</div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;">        })</div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><br/></b></div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b><br/></b></div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b>表单序列化</b></div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;">    当页面上表单需要提交时，我们如果把数据直接写在data里面工作量会很大，所以出现了表单序列化。</div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;">        $('form').serialize()</div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"/><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;">    表单序列化是把整个表单内容提取出来，组成一个键值对，并且对URL进行编码。</div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><br/></div><div><br/></div></div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><b>$.param()</b></div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;">    用来解析对象。</div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div>    </div></div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;">        var str = $.param({</div><div>            username:"admin",</div><div>            password:"123456"</div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;">        })</div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;">        console.log(str);    // username=admin&amp;password=123456</div><div style="color: rgb(51, 51, 51); letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div><br/></div><div><br/></div><div><b>$.each()</b></div><div>    用来遍历对象，类似于for-in</div><div>        $.each(obj, function(index, value){ })</div><div><br/></div><div><br/></div></div></font></div></div><div style="font-size: 12px; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px; -webkit-text-stroke-width: 0px;"/><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></body></html>